<template>
  <div class="orderList">
    <orderHeader title="我的订单">
      <template #tishi>
        <span>温馨提示：商品下单成功后，以最终下单为准哦，请尽快结算
        </span>
      </template>
    </orderHeader>
    <div class="list-box">
      <div class="container">
        <div class="list-item-box">
          <div class="list-item" v-for="(item,index) in orderList" :key="index">
            <div class="item-top">
              <div class="time">{{item.time}}</div>
              <div class="user">{{item.username}}</div>
              <div class="num">订单号：{{item.id}}</div>
              <div class="way noborder">{{item.payway}}</div>
              <div class="endmoney noborder">
                总金额：<span class="color">{{item.sum}}</span> 元
              </div>
            </div>
            <div class="item-bottom">
              <div class="item-list" v-for="(child,index) in item.productlist" :key="index">
                <div class="img">
                  <img :src="child.imgUrl" alt="">
                </div>
                <div class="productList">
                  <div class="productname">
                    {{child.title}}
                  </div>
                  <div class="productNumAndPrice">
                    {{child.price}} X {{child.num}}台
                  </div>
                </div>

              </div>
              <div class="paystatus">
                <router-link :to="`/orderpay/${item.id}`" class="color" v-show="item.status===0">未支付</router-link>
                <a class="color" v-show="item.status===10">支付成功</a>
                <a class="close" v-show="item.status===20">交易失败</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'orderList',
  data() {
    return {}
  },
  computed: {
    ...mapState(['orderList'])
  }
}
</script>

<style lang='scss' scoped>
.list-box {
  height: 1000px;
  background-color: #f5f5f5;
  padding: 40px 0;
  .list-item-box {
    .list-item {
      height: 140px;
      border: 1px solid #ccc;
      padding: 20px 40px;
      background: #fff;
      margin-bottom: 20px;
      .item-top {
        height: 40px;
        font-size: 16px;
        div {
          float: left;
          padding: 0 15px;
          border-right: 1px solid #ccc;
        }
        .noborder {
          border: 0;
        }
        .endmoney {
          float: right;
        }
      }
      .item-bottom {
        height: 100px;
        line-height: 100px;
        padding: 0 20px;
        div {
          float: left;
        }
        .img {
          img {
            width: 80px;
            height: 80px;
            vertical-align: middle;
          }
        }
        .productList {
          width: 120px;
          font-size: 14px;
          padding: 30px 15px 0;
          line-height: 20px;
        }
        .paystatus {
          float: right;
        }
      }
    }
  }
}
.color {
  color: #ff6700;
  font-size: 22px;
}
.close {
  color: #666;
  font-size: 22px;
}
</style>
